;
(function () {
    var data = {
        code: 'images/event_loop_3.png',
        data: [{ // 1
                info: '第1步：事件循环开始，宏任务队列中，只有script(整体代码)任务，任务script(整体代码)执行，全局执行上下文global入栈',
                queue: [{
                    name: 'script队列',
                    type: 'macro'
                }],
                task: [{
                    name: 'script',
                    queue: 'script队列',
                    type: 'macro'
                }],
                CE: ['global']
            },
            { // 2
                info: '第2步：script任务执行时遇到了setTimeout, 它将任务timeout1分发到对应的队列中去',
                queue: [{
                        name: 'script队列',
                        type: 'macro'
                    },
                    {
                        name: 'setTimeout队列',
                        type: 'macro'
                    }
                ],
                task: [{
                        name: 'script',
                        queue: 'script队列',
                        type: 'macro'
                    },
                    {
                        name: 'timeout1',
                        queue: 'setTimeout队列',
                        type: 'macro'
                    }
                ],
                CE: ['global']
            },
            { // 3
                info: '第3步：script任务执行完成, 开始执行当前微任务，但是当前没有微任务，所以第1轮循环完成',
                queue: [
                    {
                        name: 'setTimeout队列',
                        type: 'macro'
                    }
                ],
                task: [
                    {
                        name: 'timeout1',
                        queue: 'setTimeout队列',
                        type: 'macro'
                    }
                ],
                CE: ['global']
            },
            { // 4
                info: '第4步：第2轮循环开始，开始执行宏任务timeout1, timeout1上下文入栈。',
                queue: [
                    {
                        name: 'setTimeout队列',
                        type: 'macro'
                    }
                ],
                task: [
                    {
                        name: 'timeout1',
                        queue: 'setTimeout队列',
                        type: 'macro'
                    }
                ],
                CE: ['global', 'timeout1']
            },
            { // 5
                info: '第5步：代码运行过程中，遇到Promise实例，promise1上下文入栈',
                queue: [
                    {
                        name: 'setTimeout队列',
                        type: 'macro'
                    }
                ],
                task: [
                    {
                        name: 'timeout1',
                        queue: 'setTimeout队列',
                        type: 'macro'
                    }
                ],
                CE: ['global', 'timeout1', 'promise1']
            },
            { // 6
                info: '第6步：运行过程中遇到resolve1, resolve1上下文入栈',
                queue: [
                    {
                        name: 'setTimeout队列',
                        type: 'macro'
                    }
                ],
                task: [
                    {
                        name: 'timeout1',
                        queue: 'setTimeout队列',
                        type: 'macro'
                    }
                ],
                CE: ['global', 'timeout1', 'promise1', 'resolve1']
            },
            { // 7
                info: '第7步：resolve1执行完成，resolve1上下文出栈',
                queue: [
                    {
                        name: 'setTimeout队列',
                        type: 'macro'
                    }
                ],
                task: [
                    {
                        name: 'timeout1',
                        queue: 'setTimeout队列',
                        type: 'macro'
                    }
                ],
                CE: ['global', 'timeout1', 'promise1']
            },
            { // 8
                info: '第8步：promise1执行完成，promise1上下文出栈',
                queue: [
                    {
                        name: 'setTimeout队列',
                        type: 'macro'
                    }
                ],
                task: [
                    {
                        name: 'timeout1',
                        queue: 'setTimeout队列',
                        type: 'macro'
                    }
                ],
                CE: ['global', 'timeout1']
            },
            { // 9
                info: '第9步：接着创建then1微任务到队列Promise',
                queue: [
                    {
                        name: 'setTimeout队列',
                        type: 'macro'
                    },
                    {
                        name: 'Promise队列',
                        type: 'micro'
                    }
                ],
                task: [
                    {
                        name: 'timeout1',
                        queue: 'setTimeout队列',
                        type: 'macro'
                    },
                    {
                        name: 'then1',
                        queue: 'Promise队列',
                        type: 'micro'
                    }
                ],
                CE: ['global', 'timeout1']
            },
            { // 10
                info: '第10步：接着遇到了setTimeout, 创建宏任务timeout2',
                queue: [
                    {
                        name: 'setTimeout队列',
                        type: 'macro'
                    },
                    {
                        name: 'Promise队列',
                        type: 'micro'
                    }
                ],
                task: [
                    {
                        name: 'timeout2',
                        queue: 'setTimeout队列',
                        type: 'macro'
                    },
                    {
                        name: 'timeout1',
                        queue: 'setTimeout队列',
                        type: 'macro'
                    },
                    {
                        name: 'then1',
                        queue: 'Promise队列',
                        type: 'micro'
                    }

                ],
                CE: ['global', 'timeout1']
            },
            { // 11
                info: '第11步：宏任务timeout1完成，开始完成当前的微任务，当前的微任务只有一个then1, then1执行上下文入栈',
                queue: [
                    {
                        name: 'setTimeout队列',
                        type: 'macro'
                    },
                    {
                        name: 'Promise队列',
                        type: 'micro'
                    }
                ],
                task: [
                    {
                        name: 'then1',
                        queue: 'Promise队列',
                        type: 'micro'
                    },
                    {
                        name: 'timeout2',
                        queue: 'setTimeout队列',
                        type: 'macro'
                    },
                ],
                CE: ['global', 'timeout1', 'then1']
            },
            { // 12
                info: '第12步：微任务then1执行完成，then1执行上下文出栈，此时所有微任务完成，第2轮循环结束',
                queue: [
                    {
                        name: 'setTimeout队列',
                        type: 'macro'
                    }
                ],
                task: [
                    {
                        name: 'timeout2',
                        queue: 'setTimeout队列',
                        type: 'macro'
                    },
                ],
                CE: ['global', 'timeout1']
            },
            { // 13
                info: '第13步：开始执行第3轮循环，执行宏任务timeout2, timeout2上下文入栈',
                queue: [
                    {
                        name: 'setTimeout队列',
                        type: 'macro'
                    }
                ],
                task: [
                    {
                        name: 'timeout2',
                        queue: 'setTimeout队列',
                        type: 'macro'
                    },
                ],
                CE: ['global', 'timeout1', 'timeout2']
            },
            { // 14
                info: '第14步：代码运行过程中，遇到Promise实例，promise2上下文入栈',
                queue: [
                    {
                        name: 'setTimeout队列',
                        type: 'macro'
                    }
                ],
                task: [
                    {
                        name: 'timeout2',
                        queue: 'setTimeout队列',
                        type: 'macro'
                    },
                ],
                CE: ['global', 'timeout1', 'timeout2', 'promise2']
            },
            { // 15
                info: '第15步：接着遇到resolve2, resolve2上下文入栈',
                queue: [
                    {
                        name: 'setTimeout队列',
                        type: 'macro'
                    }
                ],
                task: [
                    {
                        name: 'timeout2',
                        queue: 'setTimeout队列',
                        type: 'macro'
                    },
                ],
                CE: ['global', 'timeout1', 'timeout2', 'promise2', 'resolve2']
            },
            { // 16
                info: '第16步：resolve2执行完成，resolve2上下文出栈',
                queue: [
                    {
                        name: 'setTimeout队列',
                        type: 'macro'
                    }
                ],
                task: [
                    {
                        name: 'timeout2',
                        queue: 'setTimeout队列',
                        type: 'macro'
                    },
                ],
                CE: ['global', 'timeout1', 'timeout2', 'promise2']
            },
            { // 17
                info: '第17步：promise2执行完成，promise2上下文出栈',
                queue: [
                    {
                        name: 'setTimeout队列',
                        type: 'macro'
                    }
                ],
                task: [
                    {
                        name: 'timeout2',
                        queue: 'setTimeout队列',
                        type: 'macro'
                    },
                ],
                CE: ['global', 'timeout1', 'timeout2']
            },
            { // 18
                info: '第18步：创建then2微任务，并分发到Promise队列中',
                queue: [
                    {
                        name: 'setTimeout队列',
                        type: 'macro'
                    },
                    {
                        name: 'Promise队列',
                        type: 'micro'
                    }
                ],
                task: [
                    {
                        name: 'timeout2',
                        queue: 'setTimeout队列',
                        type: 'macro'
                    },
                    {
                        name: 'then2',
                        queue: 'Promise队列',
                        type: 'micro'
                    }
                ],
                CE: ['global', 'timeout1', 'timeout2']
            },
            { // 19
                info: '第19步：此时宏任务timeout2完成，开始执行微任务，当前只有一个微任务then2, then2执行上下文入栈',
                queue: [
                    {
                        name: 'Promise队列',
                        type: 'micro'
                    }
                ],
                task: [
                    {
                        name: 'then2',
                        queue: 'Promise队列',
                        type: 'micro'
                    }
                ],
                CE: ['global', 'timeout1', 'timeout2', 'then2']
            },
            { // 20
                info: '第20步：then2执行完成，then2执行上下文出栈，此时第3轮循环完成',
                queue: [],
                task: [],
                CE: ['global', 'timeout1', 'timeout2']
            },
            { // 21
                info: '第21步：timeout2代码执行完成，timeout2执行上下文出栈',
                queue: [],
                task: [],
                CE: ['global', 'timeout1']
            },
            { // 22
                info: '第22步：timeout1代码执行完成，timeout1执行上下文出栈',
                queue: [],
                task: [],
                CE: ['global']
            }
        ]
    }

    eventLoop(data)
})();